<template>
  <div>
    <!-- <el-row :gutter="16">
      <el-col :span="5">
        <div
          style="
            margin-bottom: 10px;
            height: 200px;
            border: 1px solid red;
            overflow: auto;
          "
        >
          <div style="width:500px">
            <el-tree
              ref="leftTree"
              :data="data"
              :props="defaultProps"
              show-checkbox
              :default-expand-all="(tu = true)"
              :render-content="renderContent"
              :check-strictly="true"
              @change="getValue"
            >
            </el-tree>
          </div>
        </div>
      </el-col>
    </el-row> -->
    <!-- div eltree 拖拽 -->
    <div>
      <el-tree
        :data="data"
        node-key="id"
        default-expand-all
        
        draggable
        :allow-drop="allowDrop"
        :allow-drag="allowDrag"
      >
      </el-tree>
      <!-- 
        @node-drag-start="handleDragStart"
        @node-drag-enter="handleDragEnter"
        @node-drag-leave="handleDragLeave"
        @node-drag-over="handleDragOver"
        @node-drag-end="handleDragEnd"
        @node-drop="handleDrop" -->
      <el-button @click="getData">获取数据</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          label: "一级",
          // children: [
          //   {
          //     label: "二级 1-1",
          //     children: [
          //       {
          //         label:
          //           "三级 1-1-1三级指标，暂时之二十1三级指标，暂时之二十1三级指标，暂时之二十1三级指标，暂时之二十",
          //       },
          //     ],
          //   },
          // ],
        },
        {
          label: "一级 2",
          // children: [
          //   {
          //     label: "二级 2-1",
          //     children: [
          //       {
          //         label: "三级 2-1-1",
          //       },
          //     ],
          //   },
          //   {
          //     label: "二级 2-2",
          //     children: [
          //       {
          //         label: "三级 2-2-1",
          //       },
          //     ],
          //   },
          // ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    getValue() {
      let a = this.$refs.leftTree.getCheckedKeys();
      console.log(a);
    },
    renderContent(h, { node, data, store }) {
      let style = "",
        status = "";

      return h(
        "span",
        {
          attrs: {
            style: style,
            class: "treeLine",
          },
        },
        data.label + " " + data.label + status
      );
    },

    // -------------------------------
    getData(){
      console.log(this.data,'data');
    },
    // handleDragStart(node, ev) {
    //     console.log('drag start', node);
    //   },
    //   handleDragEnter(draggingNode, dropNode, ev) {
    //     console.log('tree drag enter: ', dropNode.label);
    //   },
    //   handleDragLeave(draggingNode, dropNode, ev) {
    //     console.log('tree drag leave: ', dropNode.label);
    //   },
    //   handleDragOver(draggingNode, dropNode, ev) {
    //     console.log('tree drag over: ', dropNode.label);
    //   },
    //   handleDragEnd(draggingNode, dropNode, dropType, ev) {
    //     console.log('tree drag end: ', dropNode && dropNode.label, dropType);
    //   },
    //   handleDrop(draggingNode, dropNode, dropType, ev) {
    //     console.log('tree drop: ', dropNode.label, dropType);
    //   },
      allowDrop(draggingNode, dropNode, type) {
        console.log(draggingNode,'draggingNode');
        console.log(dropNode,'dropNode');
        console.log(type,'type');
        return type!=='inner'
      },
      allowDrag(draggingNode) {
        return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
      }
    }
  
};
</script>

